<template>
  <div>
    <my-lazy v-if="isShow"></my-lazy>
    <div class="detail" v-else="!isShow">
      <div class="header">
        <span class="iconfont icon-youjiantou2" @click="goback"></span>
        <h4>哔哩哔哩漫画</h4>
      </div>
      <div class="banner">
        <img :src="arr.img" alt="" srcset="" />
        <div class="banner-con">
          <h3>{{ arr.title }}</h3>
          <p>
            {{ str }} <span>{{ arr.style }}</span>
          </p>
        </div>
      </div>
      <div class="star">
        <div class="title">
          <img src="../static/images/star.svg" alt="" srcset="" />
          <p>追漫</p>
        </div>
        <div class="box"><span>看第001话</span></div>
      </div>
      <div class="article" ref="art">
        <h4>连载中</h4>
        <p>
          {{ arr.content }}
        </p>
        <span class="iconfont icon-arrow-down" @click="changeHeight"></span>
      </div>
      <div class="passage">
        <h4>全部章节({{ arr.total }})</h4>
        <div class="passage-list">
          <ul>
            <li
              v-for="(item, i) in isOpen == true ? arr1 : arr.list"
              @click="getPass(i)"
            >
              {{
                i + 1 < 10
                  ? "00" + (i + 1)
                  : i + 1 && i + 1 > 99
                  ? i + 1
                  : "0" + (i + 1)
              }}
            </li>
            <li @click="ishaha()">...</li>
          </ul>
        </div>
      </div>
      <div class="talk">
        <h4>讨论区({{ msg.acount }})</h4>
        <div class="talk-list">
          <ul>
            <li v-for="(item, i) in msg.num">
              <div class="talk-img">
                <img :src="item.img" alt="" srcset="" />
                <div class="r">
                  <h4>{{ item.member }}</h4>
                  <p>{{ item.time }}</p>
                </div>
              </div>
              <div class="talk-con">
                <p>
                  {{ item.content }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="like">
        <div class="like-title">
          <h4>猜你喜欢</h4>
        </div>
        <div class="like-list">
          <ul>
            <li v-for="(item, i) in about">
              <img :src="item.img" alt="" />
              <div class="word">
                <p>{{ item.title }}</p>
                <span
                  >{{ item.finish == 1 ? "[完结] 共" : "更新至"
                  }}{{ item.total }}话</span
                >
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div v-for="(item, i) in manhuaxiangqing" :key="i">
        <img :src="item[0].url + '?token=' + item[0].token" alt="" />
      </div> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "../static/style/variable.scss";
.detail {
  .header {
    width: 100%;
    height: 4rem;
    // background-color: pink;
    display: flex;
    span {
      flex: 10%;
      line-height: 4rem;
      text-align: center;
      font-size: 25px;
      color: $color;
    }
    h4 {
      flex: 90%;
      text-align: center;
      line-height: 4rem;
      font-weight: normal;
      margin-right: 1.8rem;
    }
  }
  .banner {
    position: relative;
    width: 100%;
    height: 13.3333rem;
    margin-top: 4rem;
    img {
      width: 100%;
      height: 100%;
    }
    .banner-con {
      position: absolute;
      bottom: 10px;
      left: 0.6667rem;
      h3 {
        color: #fff;
        font-size: 22px;
        text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
        margin-bottom: 0.5333rem;
      }
      p {
        text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
        color: #fff;
        font-size: 13px;
      }
    }
  }
  .star {
    display: flex;
    justify-content: space-between;
    width: 93%;
    height: 4rem;
    margin: 0.5333rem auto 0.3rem;
    line-height: 4rem;
    // background-color: skyblue;
    .title {
      display: flex;
      img {
        display: block;
        width: 2rem;
        height: 2rem;
        margin-top: 1rem;
      }
      p {
        padding-left: 0.2667rem;
        font-size: 18px;
      }
    }
    .box {
      width: 13rem;
      height: 2.8rem;
      background-color: #fb7299;
      line-height: 2.8rem;
      font-size: 14px;
      color: aliceblue;
      text-align: center;
      border-radius: 25px;
      margin-top: 0.5333rem;
      margin-right: 0.5333rem;
    }
  }
  .article {
    position: relative;
    width: 93%;
    margin: 0 auto;
    // height: 10rem;
    height: 4.5rem;
    transition: all 0.5s;
    overflow: hidden;
    span {
      position: absolute;
      bottom: -6px;
      right: -3px;
      font-size: 18px;
      // width: 2.6667rem;
    }
    h4 {
      font-weight: normal;
      font-size: 17px;
    }
    p {
      margin-top: 0.6667rem;
      line-height: 1.5;
      width: 100%;
      height: 7rem;
      // background-color: skyblue;
      font-size: 13px;
      color: $color;
    }
  }
  .passage {
    width: 93%;
    margin: 0.5333rem auto;
    h4 {
      font-weight: normal;
      font-size: 17px;
      margin-bottom: 0.5333rem;
    }
    .passage-list {
      width: 100%;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          // flex: 20%;
          width: 4rem;
          height: 2.2rem;
          border: 1px solid $color;
          margin: 0.6rem 0.8rem 0 0.2rem;
          border-radius: 5px;
          text-align: center;
          line-height: 2.2rem;
        }
      }
    }
  }
  .talk {
    width: 93%;
    margin: 1.3333rem auto;
    h4 {
      font-weight: normal;
      font-size: 17px;
    }
    .talk-list {
      width: 100%;
      margin-top: 1rem;
      overflow-x: scroll;

      ul {
        width: 1600%;
        display: flex;
        li {
          width: 70%;
          height: 9.6667rem;
          // background-color: pink;
          margin-right: 1.3333rem;
          border: 1px solid $color;
          .talk-img {
            margin: 0.5667rem auto;
            display: flex;
            width: 90%;
            height: 3rem;
            // background-color: purple;

            img {
              display: block;
              width: 2.6667rem;
              height: 2.6667rem;
              // background-color: red;
              border-radius: 100%;
            }
            .r {
              margin-top: 0.2667rem;
              margin-left: 0.2667rem;
              h4 {
                font-weight: normal;
                color: $color;
                font-size: 14px;
              }
              p {
                color: $color;
                font-size: 14px;
              }
            }
          }
          .talk-con {
            margin: 0 auto;
            width: 90%;
            height: 4.6667rem;
            // background-color: red;

            p {
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow-y: hidden;
              line-height: 24px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  .like {
    width: 93%;
    margin: 1.3333rem auto;
    // background-color: pink;
    height: 26.6667rem;
    .like-title {
      h4 {
        font-weight: normal;
        font-size: 18px;
      }
    }
    .like-list {
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          flex: 28%;
          // width: 6.4333rem;
          height: 11rem;
          margin-left: 0.7rem;
          margin-top: 0.8rem;
          // background-color: paleturquoise;
          img {
            display: block;
            width: 100%;
            height: 8rem;
            // background-color: yellow;
          }
          .word {
            p {
              margin-top: 0.2667rem;
              font-size: 14.5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              font-size: 12.5px;
              color: $color;
            }
          }
        }
      }
    }
  }
}
</style>

<script>
import {
  comicDetail,
  reply,
  about,
  getImageIndex,
  imageToken,
} from "@/request";
import lazyCom from "../components/lazyCom.vue";

export default {
  name: "detailCom",
  data() {
    return {
      isShow: true,
      arr: [],
      arr1: [],
      str: "",
      oid: 0,
      msg: "",
      about: [],
      passage: 0,
      imgToken: [],
      newImg: "",
      manhuaxiangqing: [],
      host: "",
      xixi: [],
      isOpen: true,
    };
  },
  components: {
    "my-lazy": lazyCom,
  },
  methods: {
    changeHeight() {
      this.$nextTick(() => {
        if (this.$refs["art"]) {
          let height = this.$refs["art"];
          console.log(height);
          if (this.isShow) {
            height.style["height"] = "10rem";
            this.isShow = false;
          } else {
            height.style["height"] = "4.5rem";
            this.isShow = true;
          }
        }
      });
    },
    goback() {
      window.history.back(-1);
    },
    ishaha() {
      this.isOpen = !this.isOpen;
    },
    getPass(i) {
      //获取章节id
      this.passage = this.arr.list[i].id;
      getImageIndex({ ep_id: this.passage }).then((content) => {
        let { data } = content;
        this.host = `${data.host}`;
        let ccc = data.images.map((item) => {
          let obj = '"' + this.host + item.path + "@660w.jpg" + '"';
          return obj;
        });
        this.imgToken = ccc;
        for (let i = 0; i < this.imgToken.length - 1; i++) {
          this.$axios
            .get(
              `https://apis.netstart.cn/bcomic/ImageToken?urls=[${this.imgToken[i]}]`
            )
            .then((result) => {
              // console.log(result);
              this.manhuaxiangqing.push(result.data.data);
              // console.log(this.manhuaxiangqing[0]);
              this.$router.push({
                path: "/cartoon",
                query: {
                  dd: this.manhuaxiangqing,
                },
              });
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
  created() {
    this.isShow = true;
    if (this.$route) {
      let id = this.$route;
      // console.log(id);
    }
    let num = localStorage.getItem("comid");

    comicDetail({ comic_id: num }).then((content) => {
      // console.log(content);
      let { data } = content;
      let obj = {};
      obj.title = data.title;
      obj.img = data.horizontal_cover;
      obj.author = data.author_name;
      obj.content = data.evaluate;
      obj.list = data.ep_list;
      obj.style = data.styles[0];
      obj.total = data.total;
      obj.list1 = data.series_info;
      this.arr = obj;
      this.arr1 = this.arr.list1.comics;
      this.arr.author.map((item) => {
        this.str += item + "/";
      });

      function sortBy(attr, rev) {
        if (rev == undefined) {
          rev = 1;
        } else {
          rev ? 1 : -1;
        }
        return function (a, b) {
          a = a[attr];
          b = b[attr];
          if (a < b) {
            return rev * -1;
          }
          if (a > b) {
            return rev * 1;
          }
          return 0;
        };
      }
      this.arr.list.sort(sortBy("ord", 1));
      // console.log(this.arr.list);
    });
    reply({ oid: num }).then((content) => {
      // console.log(content);
      let { data } = content;
      let obj = {};
      obj.acount = data.page.acount;
      let ccc = data.replies.map((item) => {
        let obj1 = {};
        obj1.member = item.member.uname;
        obj1.img = item.member.avatar;
        obj1.content = item.content.message;
        obj1.time = item.reply_control.time_desc;
        return obj1;
      });
      obj.num = ccc;
      this.msg = obj;
    });
    about({ comic_id: num }).then((content) => {
      let { data } = content;
      let about = data.map((item) => {
        let obj = {};
        obj.title = item.title;
        obj.img = item.square_cover;
        obj.id = item.season_id;
        obj.total = item.total;
        obj.finish = item.is_finish;
        return obj;
      });
      this.about = about;
      this.isShow = false;
    });

    //
  },
};
</script>